<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue.js 时钟</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
        /* 隐藏未编译的变量 */

        [v-cloak] {
            display: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            text-align: center;
        }

        .change {
            padding: 20px;
            display: block;
            text-align: right;
        }

        a {
            text-decoration: none;
            border-radius: 3px;
        }

        a.bluea {
            color: #0099ff;
        }

        a.reda {
            color: #f83f1f;
        }

        a.greena {
            color: #51eb5e;
        }

        a.blacka {
            color: #000000;
        }

        .clock {
            margin: 200px auto;
        }

        p.date {
            font-size: 20px;
            font-family: cursive;
        }

        p.time {
            font-size: 30px;
            font-family: cursive;
            margin-top: 10px;
        }

        .blue p {
            color: #0099ff;
            text-shadow: 0 0 30px #0099ff;
        }

        .red p{
            color: #f83f1f;
            text-shadow: 0 0 30px #f83f1f;
        }

        .green p{
            color: #51eb5e;
            text-shadow: 0 0 30px #51eb5e;
        }

        .black p{
            color: #000000;
            text-shadow: 0 0 30px #000000;
        }

        .blue .bluea,.red .reda,.green .greena,.black .blacka{
            background-color: rgb(248, 203, 136);
        }
    </style>
</head>

<body>
    <div id="main" v-cloak v-on:click.prevent>
        <div class="change" v-bind:class="color">
            <a href="" class="bluea" v-on:click="color='blue'">蓝色</a>
            <a href="" class="reda" v-on:click="color='red'">红色</a>
            <a href="" class="greena" v-on:click="color='green'">绿色</a>
            <a href="" class="blacka" v-on:click="color='black'">黑色</a>
        </div>
        <div class="clock" v-bind:class="color">
            <p class="date">{{date}}</p>
            <p class="time">{{time}}</p>
        </div>
    </div>

    <script>
        var demo = new Vue({
            el: "#main",
            data: {
                date: '',
                time: '',
                color:'blue'
            }
        });

        var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',];
        update();
        //1. setInterval(update,1000); 一秒后执行update函数
        //2. setInterval(update(),1000); 立即执行update函数
        //3. setInterval("update()",1000); 一秒后执行update函数
        var timerID = setInterval(update, 1000);

        function update() {
            var cd = new Date();
            demo.date = format(cd.getUTCFullYear(), 4) + '-' + format((cd.getMonth() + 1), 2) + '-' + format(cd.getDate(), 2) + ' ' + week[cd.getDay()];
            demo.time = format(cd.getHours(), 2) + ':' + format(cd.getMinutes(), 2) + ':' + format(cd.getSeconds(), 2);
        }

        //加0来格式化数字
        function format(num, digit) {
            var zero = '';
            for (var i = 1; i < digit; i++) {
                zero += '0';
            }
            //.slice(start,end)返回一个新的数组，包含从 start到end（不包括该元素）的元素
            //.slice()中使用负值从数组的尾部选取元素
            return (zero + num).slice(-digit);
        }
    </script>
</body>

</html>